<template>
    <div>
       <div class="card" style="padding:10px">
           <el-form :inline="true" :model="formInline" class="flexBox1">
                <el-form-item label="所属科室">
                    <el-select v-model="formInline.dept" placeholder="请选择所属科室" size="small" clearable>
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="formInline.supervise">是否护理部监管</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
                    <el-button @click="onReset" size="mini">重置</el-button>
                </el-form-item>
            </el-form>
            <div style="clear:both"></div>
            <el-divider></el-divider>
            <div class="flexBox titleBox">
                <div style="font-size:14px">科室一览表</div>
                <div>
                    <div v-for="item in titleList" style="display:inline-block" :class="item.class">{{item.title}}</div>
                </div>
            </div>
       </div>
       <div class="card" style="padding:10px;margin-top:20px">
           <div v-for="item in deptList" style="margin-bottom:10px">
                <div class="flexBox titleBox1">
                <div style="font-size:14px">{{item.name}}({{item.total}})</div>
<!--                <div style="font-size:14px">{{item}}</div>-->
                <div>
<!--                    <div v-for="item in item.number" style="display:inline-block;margin-right:10px">{{item.title}}:{{item.total}}</div>-->
                </div>
                </div>
                <div class="titleBox2 flexBox1">
                    <span v-for="item in item.option" :class="item.class" @click="handleClick(item)">{{item.name}}</span>
                </div>
           </div>
       </div>
            <el-dialog :visible.sync="dialogTableVisible" :append-to-body="true" title="详细信息" width="1240px">
            <el-table :data="gridData"   :header-cell-style="{ background: 'rgb(242, 246, 252)' }"
                      style="font-size: 12px;width: 100%;margin-top:10px">
                <el-table-column  prop="fileId"  label="档案号" width="150"></el-table-column>
                <el-table-column  prop="id"  label="工号" width="150"></el-table-column>
                <el-table-column  prop="name"  label="姓名" width="150"></el-table-column>
                <el-table-column  prop="gender" label="性别" width="150"></el-table-column>
                <el-table-column  prop="ryxz" label="人员性质" width="150"></el-table-column>
                <el-table-column  prop="title" label="聘任职称" width="150"></el-table-column>
                <el-table-column  prop="dept" label="所属科室" width="150"></el-table-column>
                <el-table-column  prop="tel" label="联系电话" width="150"></el-table-column>
           </el-table>
           </el-dialog>
    </div>
</template>
<script>
import TaskManager from "../service/TaskManager";
export default({
    data(){
        return{
            dialogTableVisible:false,
            formInline: {
            dept: '',
            supervise:false,
            },
            titleList:[
                {title:"护士/护师",class:"blue"},
                {title:"主任护师",class:"violet"},
                {title:"主管护师",class:"teal"},
            ],
            gridData:[],
            options:[],
            deptList:[
                // {name:"体检中心",
                // total:4,
                // number:[{title:"主任护师",total:"2"},{title:"副主任护师",total:"1"},{title:"主管护师",total:"1"}],
                // option:[{name:"001",class:"blue"},{name:"002",class:"blue"},{name:"003",class:"violet"},{name:"004",class:"teal"},]
                // },
            ]
        }
    },
  mounted() {
    this.getDeptList();
    this.getDept();
  },
  methods:{
      onSubmit(){
        TaskManager.getDeptList(this.formInline).then((res)=>{
          let dept=this.options.filter((item)=>{
            if(item.value==this.formInline.dept){
              return item.label
            }
          })
          console.log(dept,'dept')
          this.deptList=[
            {name:dept[0].label,
            total:0,
            // number:[{title:"主任护师",total:"2"},{title:"副主任护师",total:"1"},{title:"主管护师",total:"1"}],
            option:[]
            },
          ]
          let data=res.data
          for (const datum of data) {
            let item={
              name:datum.姓名,
              title:datum.聘任职称,
              ryxz:datum.ryxz,
              gender:datum.性别,
              tel:datum.手机号码,
              dept:datum.科室,
              id:datum.工号,
              fileId:datum.档案编号,
              class:(datum.聘任职称==='护士'||datum.聘任职称==='护师')?'blue':(datum.聘任职称?datum.聘任职称:'').indexOf('主任')?'violet':'teal'
            }
            this.deptList[0].total++
            this.deptList[0].option.push(item)
          }
        })
      },
      onReset(){
          this.getDeptList();
      },
      handleClick(item){
          this.gridData=[]
          this.gridData.push(item)
          this.dialogTableVisible=true
        },
      getDept(){
        TaskManager.getDictionary({temp:'dept'}).then((res)=>{
          this.options=res.data
        })
      },
      getDeptList(){
        TaskManager.getDeptList().then((res)=>{
          console.log(res.data,"deptList")
          let data=res.data
          let list={}
          // debugger;
          for (const item of data) {
            if(list[item.科室]){
              let optionItem={
                name:item.姓名,
                title:item.聘任职称,
                ryxz:item.ryxz,
                gender:item.性别,
                tel:item.手机号码,
                dept:item.科室,
                id:item.工号,
                fileId:item.档案编号,
                class:(item.聘任职称==='护士'||item.聘任职称==='护师')?'blue':(item.聘任职称?item.聘任职称:'').indexOf('主任')?'violet':'teal'
              }
              list[item.科室].total++
              // list[item.科室].total++
              list[item.科室].option.push(optionItem)
            }else{
              list[item.科室]={
                name:item.科室,
                total:1,
                option:[
                  {
                    name:item.姓名,
                    title:item.聘任职称,
                    ryxz:item.ryxz,
                    gender:item.性别,
                    tel:item.手机号码,
                    dept:item.科室,
                    id:item.工号,
                    fileId:item.档案编号,
                    class:(item.聘任职称==='护士'||item.聘任职称==='护师')?'blue':item.聘任职称.indexOf('主任')?'violet':'teal'
                  }
                ]
              }
            }
          }
          this.deptList=list;
        })
      }
    }
})
</script>

<style scoped>
.el-divider{
    margin: -20px 0 10px 0;
}
.flexBox1{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items:center;
    padding: 10px;
}
.titleBox{
    background-color: #99CCFF;
    border-radius: 4px ;
    padding: 14px;
    margin: 5px;
}
.titleBox1{
    background-color: #99CCFF;
    border-radius: 4px 4px 0 0;
    padding: 14px;
    /* margin: 5px; */
}
.titleBox2{
    background-color: #FFF;
    border-radius: 0 0  4px 4px;
    padding: 14px;
    border: 1px solid #99CCFF;
    /* margin: 5px; */
}
.blue{
    background-color: slateblue;
    padding: 4px;
    border-radius: 4px;
  margin: 2px 2px;
    color: white;
    width: 80px;
}
.violet{
    background-color: violet;
    padding: 4px;
    border-radius: 4px;
    margin: 2px 2px;
    color: white;
    width: 80px;
}
.teal{
    background-color: teal;
    padding: 4px;
    border-radius: 4px;
    margin: 2px 2px;
    color: white;
    width: 80px;
}
</style>
